{extend name="../../admin/view/main"}

{block name="content"}

<style id="lay-ext-mulitsel-style">
    .lay-ext-mulitsel .layui-form-select dl dd div{
        margin-top:0px!important;
    }
    .lay-ext-mulitsel .layui-form-select dl dd.layui-this{
        background-color:#fff
    }
    .lay-ext-mulitsel .layui-input.multiple{
        height:auto;padding:4px 10px 4px 10px;overflow:hidden;min-height:38px;margin-top:-38px;left:0;z-index:99;position:relative;background:#fff;
    }
    .lay-ext-mulitsel .layui-input.multiple a{
        padding:2px 5px;background:#5FB878;border-radius:2px;color:#fff;display:block;line-height:20px;height:20px;margin:2px 5px 2px 0;float:left;
    }
    .lay-ext-mulitsel .layui-input.multiple a i{
        margin-left:4px;font-size:14px;
    }
    .lay-ext-mulitsel .layui-input.multiple a i:hover{
        background-color:#009E94;border-radius:2px;
    }
    .lay-ext-mulitsel .danger{
        border-color:#FF5722!important
    }
    .lay-ext-mulitsel .tips{
        pointer-events: none;position: absolute;left: 10px;top: 0;color:#757575;
    }
    .goods-form {
        padding: 20px 30px;
    }
    .goods-form .layui-form-item {
        margin-bottom: 20px;
    }
    .goods-form .layui-form-label {
        width: 120px;
    }
    .goods-form .layui-input-block {
        margin-left: 150px;
    }
    .goods-form .layui-col-xs3 {
        width: 31%;
        margin-right: 2%;
    }
    .goods-form .layui-col-xs3:last-child {
        margin-right: 0;
    }
    .radio-group {
        padding-top: 6px;
    }
    .upload-area {
        border: 1px dashed #e6e6e6;
        padding: 15px;
        border-radius: 2px;
        margin-bottom: 15px;
    }
    .upload-area table {
        margin-bottom: 0;
    }
    .editor-container {
        border: 1px solid #e6e6e6;
        border-radius: 2px;
    }
        /* 添加下拉框滚动条样式 */
        .layui-form-select dl {
        max-height: 200px; /* 设置最大高度 */
        overflow-y: auto; /* 添加垂直滚动条 */
    }
    /* 修复下拉框在弹窗中的显示问题 */
    .layui-layer-page .layui-form-select dl {
        max-height: 150px;
    }

</style>

<form onsubmit="return false;" id="GoodsForm" data-auto="true" method="post" class='layui-form layui-card' autocomplete="off">
    <div class="layui-card-header">
        <h3>商品信息</h3>
    </div>
    <div class="layui-card-body goods-form think-box-shadow">

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>商品分类</label>
            <div class="layui-input-block">
                <select class="layui-select" required name="parent_id" lay-search>
                    {volist name="cate_list" id="cat"} 
                        <option value="{$cat.id}" {if isset($vo.parent_id) && $vo.parent_id == $cat.id} selected {/if}>{$cat.html}{$cat.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>商品名称</label>
            <div class="layui-input-block">
                <input name="name" required class="layui-input" placeholder="请输入商品名称" value="{$vo.name|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>所属老师</label>
            <div class="layui-input-block">
                <select class="layui-select" required name="company_id" lay-search>
                    {volist name="teacher_list" id="teacher"} 
                        <option value="{$teacher.id}" {if isset($vo.company_id) && $vo.company_id == $teacher.id} selected {/if}>{$teacher.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>课程标签</label>
            <div class="layui-input-block">
                <select class="layui-select" required name="tpl_id" lay-search>
                    {volist name="tag_list" id="tag"} 
                        <option value="{$tag.id}" {if isset($vo.tpl_id) && $vo.tpl_id == $tag.id} selected {/if}>{$tag.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="color-red">*</span>商品价格</label>
                    <div class="layui-input-block">
                        <input name="price" required class="layui-input" type="number" min="0" placeholder="请输入商品价格" value="{$vo.price|default=''}">
                    </div>
                </div>
            </div>
            <div class="layui-col-xs6">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="color-red">*</span>市场价格</label>
                    <div class="layui-input-block">
                        <input name="marker_price" required class="layui-input" type="number" min="0" placeholder="请输入商品市场价格" value="{$vo.marker_price|default=''}">
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>视频链接</label>
            <div class="layui-input-block">
                <input name="url" required class="layui-input" placeholder="请输入商品视频链接" value="{$vo.url|default=''}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>库存</label>
            <div class="layui-input-block">
                <input name="total_number" required class="layui-input" type="number" min="0" placeholder="请输入商品库存" value="{$vo.total_number|default=''}">
            </div>
        </div>

        <div class="layui-row layui-col-space15">
            <div class="layui-col-xs4">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="color-red">*</span>是否上架</label>
                    <div class="layui-input-block radio-group">
                        <input type="radio" name="status" value="1"  {if !isset($vo.status) || $vo.status == 1} checked {/if} title="是" >
                        <input type="radio" name="status" value="2" {if isset($vo.status) && $vo.status == 2} checked {/if} title="否"> 
                    </div>
                </div>
            </div>
            <div class="layui-col-xs4">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="color-red">*</span>是否推荐</label>
                    <div class="layui-input-block radio-group">
                        <input type="radio" name="is_recommend" value="2"   {if !isset($vo.is_recommend) || $vo.is_recommend == 2} checked {/if}  title="是" checked>
                        <input type="radio" name="is_recommend" value="1" {if isset($vo.is_recommend) && $vo.is_recommend == 1} checked {/if}  title="否"> 
                    </div>
                </div>
            </div>
            <div class="layui-col-xs4">
                <div class="layui-form-item">
                    <label class="layui-form-label"><span class="color-red">*</span>是否免费</label>
                    <div class="layui-input-block radio-group">
                        <input type="radio" name="is_free" value="2"  {if !isset($vo.is_free) || $vo.is_free == 2} checked {/if}  title="是" checked>
                        <input type="radio" name="is_free" value="1" {if isset($vo.is_free) && $vo.is_free == 1} checked {/if} title="否"> 
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>封面及轮播图</label>
            <div class="layui-input-block upload-area">
                <table class="layui-table">
                    <thead>
                        <tr>
                            <th class="text-center">封面</th>
                            <th class="text-left">展示图片</th>
                        </tr>
                        <tr>
                            <td width="90px" class="text-center"><input name="image_path" type="hidden" value="{$vo.image_path|default=''}"></td>
                            <td width="auto" class="text-left"><input name="slides" type="hidden" value="{$vo.slides|default=''}"></td>
                        </tr>
                    </thead>
                </table>
                <script>$('[name="image_path"]').uploadOneImage(), $('[name="slides"]').uploadMultipleImage()</script>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">课程简介</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="description" placeholder="请输入课程简介">{$vo.description|default=''}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span class="color-red">*</span>商品详情</label>
            <div class="layui-input-block editor-container">
                <textarea id="content" type="text/plain" name="content" style="width:100%;height:500px;">{$vo.content|default=''|raw}</textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                {notempty name='vo.id'}<input type="hidden" name="id" value="{$vo.id}">{/notempty}
                <button class="layui-btn layui-btn-normal" type="submit">保存商品</button>
                <button class="layui-btn layui-btn-primary" id="hsitoryBack" type="button">返回</button>
            </div>
        </div>

    </div>
</form>



{/block}

{block name='script'}
<script>
    window.form.render("select"); //刷新select选择框渲染



    require(['ckeditor'], function () {
        window.createEditor('[name=content]', {height: 300});
    });

  
    $('[data-slider-box]').on('click', '[data-item-add]', function () {
        // 添加图片选项
        $(this).parent().before($('[data-item-tpl]').html()), setTimeout(function () {
            $.form.reInit();
        }, 100);
        window.form.render("select"); //刷新select选择框渲染
    }).on('click', '[data-item-rm]', function () {
        // 移除图片选项
        $(this).parents('[data-slider-item]').remove();
    });

    $("#hsitoryBack").click(function () {
        $.msg.confirm('确定要取消编辑吗？', function (index) {
            history.back(), $.msg.close(index);
        });
    })
</script>

{/block}